<template>
  <div class="card amap-example">
    <div class="amap-options">
      <el-button @click="handlerSearch">查询</el-button>
      <el-button @click="handlerStart">开始</el-button>
      <el-button @click="handlerPause">暂停</el-button>
      <el-button @click="handlerResume">继续</el-button>
      <el-button @click="handlerStop">停止</el-button>
    </div>
    <div class="amap-explore">
      <amap-explore3 ref="amapExploreRef" :opts="opts" />
    </div>
  </div>
</template>

<script setup lang="ts" name="amapExample">
import { ref, reactive } from "vue";
import AmapExplore3 from "@/components/AmapExplore3/index.vue";
import type { MapOptions, PolylineOption, AmapModule } from "@/components/AmapExplore3/interface";
import { data } from "./mock";

const opts = reactive<MapOptions>({
  center: [116.397428, 39.90923],
  zoom: 4
});

const amapExploreRef = ref<InstanceType<typeof AmapExplore3> | null>(null);
const polylineModules = ref<AmapModule>();
const handlerSearch = async () => {
  const type = Math.floor(Math.random() * 3) + 1; // 随机生成1、2或3
  const options: PolylineOption[] = [{ ...data[`polyline0${type}`] }];
  polylineModules.value = await amapExploreRef.value?.drawPolylines(options);
};

const handlerStart = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.start();
  });
};

const handlerPause = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.pause();
  });
};

const handlerResume = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.resume();
  });
};

const handlerStop = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.stop();
  });
};
</script>
<style lang="scss" scoped>
.amap-example {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.amap-options {
  display: flex;
  flex-direction: column;
}
.amap-explore {
  width: calc(100% - 100px);
  height: 100%;
}
</style>
